<!-- 编辑器 -->
<template>
  <div style="text-align: center">
    <a-tabs default-active-key="1">
      <a-tab-pane key="1">
        <span slot="tab"> <RichTextIcon />富文本编辑器 </span>
        <QuillEditor @content="artcile" />
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab"> <MdIcon />MarkDown 编辑器 </span>
        <MavoEditor @content="artcile" />
        <!-- <Vditor /> -->
      </a-tab-pane>
    </a-tabs>
    <a-space align="center" style="margin-top: 10px;">
      <a-button type="primary" @click="publish">发布</a-button>
    </a-space>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import QuillEditor from "./QuillEditor";
import MavoEditor from "./MavoEditor";
import Vditor from "./Vditor";
import { publishArticle } from "@/apis/article";
import { getToken } from "@/utils/auth";
const markDownSvg = {
  template: `
        <svg t="1610128446307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1523" width="200" height="200"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z" fill="#595959" p-id="1524"></path><path d="M429 481.2c-1.9-4.4-6.2-7.2-11-7.2h-35c-6.6 0-12 5.4-12 12v272c0 6.6 5.4 12 12 12h27.1c6.6 0 12-5.4 12-12V582.1l66.8 150.2c1.9 4.3 6.2 7.1 11 7.1H524c4.7 0 9-2.8 11-7.1l66.8-150.6V758c0 6.6 5.4 12 12 12H641c6.6 0 12-5.4 12-12V486c0-6.6-5.4-12-12-12h-34.7c-4.8 0-9.1 2.8-11 7.2l-83.1 191-83.2-191z" fill="#595959" p-id="1525"></path></svg>
    `,
};
const richTextSvg = {
  template: `
        <svg t="1610128489314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2103" width="200" height="200"><path d="M938.666667 85.333333v853.333334H85.333333V85.333333h853.333334m85.333333-85.333333H0v1024h1024V0z" p-id="2104"></path><path d="M741.333333 786.56h-69.76c-11.733333 0-21.973333-7.466667-25.6-18.56l-29.013333-88.746667c-3.626667-11.093333-13.866667-18.56-25.6-18.56H430.933333c-11.733333 0-21.973333 7.466667-25.6 18.773334L376.96 768c-3.626667 11.093333-13.866667 18.773333-25.6 18.773333h-68.693333c-18.773333 0-31.786667-18.56-25.386667-36.266666l181.333333-495.573334c3.84-10.666667 14.08-17.706667 25.386667-17.706666h99.84c11.306667 0 21.546667 7.04 25.386667 17.92l177.92 495.573333c5.76 17.28-7.253333 35.84-25.813334 35.84z m-195.413333-216.32c18.346667 0 31.36-17.92 25.6-35.413333l-50.773333-155.093334c-4.053333-12.16-6.826667-27.946667-8.533334-47.786666h-3.2c-1.493333 16-4.693333 31.573333-9.6 46.506666l-51.2 156.586667c-5.76 17.493333 7.253333 35.413333 25.6 35.413333l72.106667-0.213333z" p-id="2105"></path></svg>
    `,
};
const MdIcon = {
  template: `
        <a-icon :component="markDownSvg"/>
    `,
  data() {
    return {
      markDownSvg,
    };
  },
};
const RichTextIcon = {
  template: `
        <a-icon :component="richTextSvg"/>
    `,
  data() {
    return {
      richTextSvg,
    };
  },
};

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { QuillEditor, MavoEditor, MdIcon, RichTextIcon, Vditor },
  data() {
    // 这里存放数据
    return {
      article: {},
      token: this.$store.getters.token,
      isOpen: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    token(nv, ov) {
      if (token) this.isOpen = true;
      else this.isOpen = false;
    },
  },
  //方法集合
  methods: {
    publish() {
      let data = this.article;
      data.details.replace('style="cursor: nesw-resize;"','');
      if (data.type === "发布板块") data.type = "";
      publishArticle(this.article).then((res) => {
        this.$message.success(res.msg);
        location.reload();
        $(window).scrollTop(0);
      });
    },
    artcile(val) {
      let data = {
        title: val.title,
        details: val.content,
        type: val.type,
      };
      this.article = data;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
</style>
